<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}"/>
</head>
<body>
<!--<form th:action="@{/goods/query}" method="get">-->
<!--    <h2>产品列表查询</h2>-->
<!--    <label for="name">产品名称:</label>-->
<!--    <input type="text" id="name" name="name" th:value="${dto.name}">-->

<!--    <label for="priceStart">价格起始:</label>-->
<!--    <input type="number" id="priceStart" name="priceStart" th:value="${dto.priceStart}">-->

<!--    <label for="priceEnd">价格结束:</label>-->
<!--    <input type="number" id="priceEnd" name="priceEnd" th:value="${dto.priceEnd}">-->

<!--    <label for="stockStart">库存起始:</label>-->
<!--    <input type="number" id="stockStart" name="stockStart" th:value="${dto.stockStart}">-->

<!--    <label for="stockEnd">库存结束:</label>-->
<!--    <input type="number" id="stockEnd" name="stockEnd" th:value="${dto.stockEnd}">-->

<!--    <label for="page">页码:</label>-->
<!--    <input type="number" id="page" name="page" th:value="${dto.page}" min="1" th:max="${(num + dto.pageNum - 1) / dto.pageNum}">-->

<!--    <label for="pageNum">每页数量:</label>-->
<!--    <select id="pageNum" name="pageNum" th:value="${dto.pageNum}">-->
<!--        <option th:selected="${dto.pageNum == 12}" value="12">12</option>-->
<!--        <option th:selected="${dto.pageNum == 21}" value="21">21</option>-->
<!--        <option th:selected="${dto.pageNum == 30}" value="30">30</option>-->
<!--    </select>-->

<!--    <label for="desc">排序方式:</label>-->
<!--    <select id="desc" name="desc" th:value="${dto.desc}">-->
<!--        <option th:selected="${dto.desc == 1}" value="1">降序</option>-->
<!--        <option th:selected="${dto.desc == 0}" value="0">升序</option>-->
<!--    </select>-->

<!--    <label for="orderBy">排序字段:</label>-->
<!--    <select id="orderBy" name="orderBy" th:value="${dto.orderBy}">-->
<!--        <option th:selected="${dto.orderBy == 'id'}" value="id">上架时间</option>-->
<!--        <option th:selected="${dto.orderBy == 'name'}" value="name">名称</option>-->
<!--        <option th:selected="${dto.orderBy == 'price'}" value="price">价格</option>-->
<!--        <option th:selected="${dto.orderBy == 'stock'}" value="stock">库存</option>-->
<!--    </select>-->


<!--    <button type="submit">查询</button>-->
<!--</form>-->

<div class="container mt-5">
    <h2 class="mb-4">产品列表查询</h2>

    <form th:action="@{/goods/query}" method="get">

        <div class="form-group">
            <label for="name">产品名称:</label>
            <input type="text" class="form-control" id="name" name="name" th:value="${dto.name}">
        </div>

        <div class="form-group">
            <label for="page">页码:</label>
            <input type="number" class="form-control" id="page" name="page" th:value="${dto.page}" min="1" th:max="${Math.ceil(num / dto.pageNum)}">
        </div>


        <div class="form-group">
            <label for="pageNum">每页数量:</label>
            <select class="form-control" id="pageNum" name="pageNum" th:value="${dto.pageNum}">
                <option th:selected="${dto.pageNum == 12}" value="12">12</option>
                <option th:selected="${dto.pageNum == 21}" value="21">21</option>
                <option th:selected="${dto.pageNum == 30}" value="30">30</option>
            </select>
        </div>

        <!-- Button to trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#advancedSearchModal">
            高级查询
        </button>

        <!-- Your original form continues here -->

        <div class="modal fade" id="advancedSearchModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modalLabel">高级查询</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Additional search fields go here -->
                        <div class="form-group">
                            <label for="priceStart">价格起始:</label>
                            <input type="number" class="form-control" id="priceStart" name="priceStart" min="0" th:value="${dto.priceStart}">
                        </div>
                        <div class="form-group">
                            <label for="priceEnd">价格结束:</label>
                            <input type="number" class="form-control" id="priceEnd" name="priceEnd" min="1" th:value="${dto.priceEnd}">
                        </div>
                        <div class="form-group">
                            <label for="stockStart">库存起始:</label>
                            <input type="number" class="form-control" id="stockStart" name="stockStart" min="0" th:value="${dto.stockStart}">
                        </div>
                        <div class="form-group">
                            <label for="stockEnd">库存结束:</label>
                            <input type="number" class="form-control" id="stockEnd" name="stockEnd" min="1" th:value="${dto.stockEnd}">
                        </div>
                        <div class="form-group">
                            <label for="desc">排序方式:</label>
                            <select class="form-control" id="desc" name="desc" th:value="${dto.desc}">
                                <option th:selected="${dto.desc == 1}" value="1">降序</option>
                                <option th:selected="${dto.desc == 0}" value="0">升序</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="orderBy">排序字段:</label>
                            <select class="form-control" id="orderBy" name="orderBy" th:value="${dto.orderBy}">
                                <option th:selected="${dto.orderBy == 'id'}" value="id">上架时间</option>
                                <option th:selected="${dto.orderBy == 'name'}" value="name">名称</option>
                                <option th:selected="${dto.orderBy == 'price'}" value="price">价格</option>
                                <option th:selected="${dto.orderBy == 'stock'}" value="stock">库存</option>
                            </select>
                        </div>
                        <!-- Add other fields as needed -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" style="width: 100%">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <button id="submitBtn" type="submit" class="btn btn-primary" data-dismiss="modal">查询</button>
    </form>
</div>


<div class="container mt-4">
    <div class="row">
        <div th:each="good : ${goods}" class="col-md-4 mb-4">
            <div class="card">
                <img class="card-img-top" th:src="${good.image}" alt="Product Image" style="width: 100%; max-height: 300px;">
                <div class="card-body">
                    <h5 class="card-title" th:text="${good.name}">Product Name</h5>
                    <p class="card-text" th:text="${'￥' + good.price + 'CNY'}">Price</p>
                    <p class="card-text" th:text="${'Stock: ' + good.stock}"></p>
                    <a href="#" class="btn btn-primary btn-block">购买</a>
                </div>
                <br>
            </div>
        </div>
    </div>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!--<script th:inline="javascript">-->
<!--    function generatePagination(totalPages, currentPage) {-->
<!--        let pagination = $("#pagination");-->
<!--        pagination.empty();-->

<!--        pagination.append(`<li class="page-item ${currentPage === 1 ? 'disabled' : ''}" id="firstPage"><a class="page-link">首页</a></li>`);-->
<!--        pagination.append(`<li class="page-item ${currentPage === 1 ? 'disabled' : ''}" id="previousPage"><a class="page-link"><span>&laquo;</span></a></li>`);-->

<!--        for (let i = 1; i <= totalPages; i++) {-->
<!--            pagination.append(`<li class="page-item ${currentPage === i ? 'active' : ''}"><a class="page-link">${i}</a></li>`);-->
<!--        }-->

<!--        pagination.append(`<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}" id="nextPage"><a class="page-link"><span >&raquo;</span></a></li>`);-->
<!--        pagination.append(`<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}" id="lastPage"><a class="page-link">尾页</a></li>`);-->
<!--    }-->

<!--    let num = /*[[${num}]]*/;-->
<!--    let pageNum = document.getElementById("pageNum").value;-->
<!--    let buttomNum = (num == 0) ? 1 : Math.ceil(num / pageNum);-->
<!--    generatePagination(buttomNum, /*[[${dto.page}]]*/);-->

<!--    $("#pagination").on("click", "li.page-item:not(.disabled)", function () {-->
<!--        document.getElementById("page").value = $(this).text();-->
<!--        document.getElementById("submitBtn").submit();-->
<!--    });-->
<!--</script>-->

</html>